import React, { useEffect, useState } from 'react'
import request from '../../request/request'
import { Space, Switch, Table, Tag, Button, Popconfirm, Form } from 'antd'
import Edit from './compoments/Edit'
import { useSelector } from 'react-redux'
import Tabll from './compoments/Tab'

function Home() {

    const [data, setdata] = useState([])

    const [total, setTotal] = useState(0)
    const [pageSize, setPageSize] = useState(5)
    const [pageNum, setPageNum] = useState(1)
    const getdata = async () => {
        const res = await request({ url: '/getSchemaList', method: 'get', params: { pageSize, pageNum } })
        console.log(res);
        const { code, list, total } = res.data

        if (code == 1) {
            setdata(list)
            setTotal(total)
        }

    }



    useEffect(() => {

        getdata()
    }, [pageNum, pageSize])

    console.log(data);

    const columns = [
        { title: 'ID', dataIndex: 'id', },
        { title: '姓名', dataIndex: 'name', },
        { title: '职位', dataIndex: 'job', },
        { title: '地址', dataIndex: 'schema_name', },
        {
            title: '是否正式员工', dataIndex: 'type', render(_, item) {
                return <Tag color={item.type === '正式员工' ? 'blue' : 'red'}>{item.type}</Tag>
            }
        },
        {
            title: '状态', dataIndex: 'status', render(_, item) {
                return <Switch checked={item.status === 1}></Switch>
            }


        },


        {
            title: '操作',
            key: 'action',
            render: (_, item) => (
                <Space size="middle">
                    <Button color="skblue" variant="outlined" onClick={() => editfn(item)}>
                        编辑
                    </Button>

                    <Popconfirm
                        title="Delete the task"

                        onConfirm={() => del(item.id)}

                    >
                        <Button color="red" variant="outlined" >
                            删除
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];



    let del = async (id) => {
        // console.log(id);
        const res = await request({ url: '/delSchema', method: 'delete', params: { id } })
        const { code } = res.data
        if (code == 1) {
            getdata()
            alert('删除成功')
        }


    }

    // 新增编辑


    const [titles, setTitles] = useState('')
    const [open, setOpen] = useState(false)
    const [form] = Form.useForm()



    const editfn = (item) => {
        setTitles('编辑')
        setOpen(true)
        form.setFieldsValue(item)
        console.log(item);

    }

    const addfn = () => {
        setTitles('新增')
        setOpen(true)
    }

    const falsexx = () => {
        setOpen(false)
        form.resetFields()
    }


    const onsubmit = async (values) => {
        const res = await request({ url: '/editSchema', method: 'put', data: values })
        const { code } = res.data
        if (code == 1) {
            getdata()
            falsexx()
            alert('编辑成功')
        }
        else {
            const res = await request({ url: '/addSchema', method: 'post', data: values })
            const { code } = res.data
            if (code == 1) {
                getdata()
                falsexx()
                alert('新增成功')
            }
        }
    }




    return (
        <div>

            <Button onClick={() => addfn()}>新增</Button>
            <Tabll setPageSize={setPageSize} setPageNum={setPageNum} pageSize={pageSize} pageNum={pageNum} total={total} data={data} columns={columns}></Tabll>
            <Edit onsubmit={onsubmit} form={form} falsexx={falsexx} open={open} titles={titles}></Edit>
        </div>
    )
}

export default Home
